<template>
  <div>
    <div v-if="showMe">
      <Backbar title="历史订单"></Backbar>
      <div class="order_box" v-show="showOrder">
        <div class="order_one">
          <!--<div class="order_img">-->
          <!--<img src="../images/shop-logo.png" alt="">-->
          <!--</div>-->
          <div v-if="orderlist!==['']" class="order_info" v-for=" (n, index) in orderlist " :key="index">
            <header class="order_info_t">
              <div class="order_title flex_align">
                <p class="b_name">{{n.name.split('/')[0]}}</p>
                <p class="b_status">已完成</p>
              </div>
              <p class="time">下单时间：{{n.date_order}}</p>
            </header>
            <footer class="order_info_b flex_align">
              <p class="order_brief_info">菜品</p>
              <p class="order_price">数量</p>
              <p class="order_time">总金额</p>
            </footer>
            <footer v-for=" (foods, index) in n.order_line" :key="index" class="order_info_b flex_align">
              <p class="order_brief_info" style="color: #00abf2">{{foods.product_id}}</p>
              <p class="order_price" style="color: #00abf2">{{foods.price_unit}}</p>
              <p class="order_time" style="color: #00abf2">{{foods.price_unit * foods.qty}}</p>
            </footer>
            <footer class="order_info_b flex_align">
              <p class="order_brief_info" style="color: black">总计</p>
              <p class="order_price"></p>
              <p class="order_time" style="color: black">{{n.amount_total}}</p>
            </footer>
            <!--<div style="display:none;">{{  }}</div>-->
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import Backbar from './small_components/Back_bar';
  import Fixednav from './small_components/Fixed_nav';
  import { mapGetters } from 'vuex';
  export default {
    name: 'orderlist',
    data () {
      return {
        showOrder: true,
        startTime: '', // 下单时间
        storeName: '', // 店名
        table_id: '', // 桌号
        orderStatus: '已完成', // 订单状态
        orderlist: '',
        foodsOrder: [], // 订单列表
        showMe: true
      };
    },
    computed: {
      ...mapGetters([
        'getLogin',
        'getFalseOrder' // 已完成订单
      ])
    },
    mounted () {
    },
    methods: {
      getOrder () {
        console.log('获取订单');
        // 获取订单
        this.showOrder = true;
        this.$http
            .post(
              this.global.url + 'pos/read_order_details?pos_user_id=' + this.global.userid,
              {},
          {
            emulateJSON: true,
            header: {
              'Access-Control-Allow-Origin': '*',
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }
            )
            .then(
              response => {
                response = response.data;
                this.orderlist = response.food_time;
                this.$store.dispatch('setLoading', false);
                if (this.orderlist === '') {
                  alert('无历史订单');
                }
              },
              response => {
                // error callback
                console.log(response.data);
              }
            );
      }
    },
    created () {
      this.$store.dispatch('setLoading', false);
      this.global.whichPage = 'orderlist';
      this.$store.dispatch('setLoading', true);
      this.getOrder();
    },
    components: {
      Backbar,
      Fixednav
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .order_box{
    margin: 1rem 0 1.2rem;
  }
  .order_one{
    margin-bottom: .2rem;
    .order_img{
      width:1rem;
      height:1rem;
      float:left;
      padding: .2rem .4rem;
      img{
        width:100%;
      }
    }
    .order_info{
      background:#fff;
      margin-top: .5rem;
      padding:.2rem .2rem 0 0;
      box-sizing:border-box;
      .order_info_t{
        border-bottom: 1px solid #eee;
        .order_title{
          height:.6rem;
          line-height:.6rem;
          .b_name{
            padding-left: 2rem;
            font-size:.6rem;
          }
          .b_status{
            font-size:.35rem;
            color:#333;
          }
        }
        .order_time{
          font-size:.3rem;
          color:#999;
          line-height:.6rem;
        }
        .time{
          padding-right: 1rem;
          font-size: .4rem;
        }
      }
      .order_info_b{
        padding: 0.2rem 0;
        .order_brief_info{
          width: 40%;
          font-weight: bold;
          font-size: 0.346667rem;
          color: #666;
        }
        .order_price{
          width: 30%;
          text-align: center;
          font-size: 0.346667rem;
          color: #333;
          font-weight: bold;
        }
        .order_time{
          width: 30%;
          font-size: 0.346667rem;
          color: #333;
          font-weight: bold;
        }
      }
    }
  }
</style>
